<template>
    <div v-show="showDialog">
        <div class="add-address-show1">
            <div class="title">
                <div>支付订单</div>
                <img :src="$global.Image.icon_close" @click="reload" />
            </div>
            <div class="add-input">
                <div class="border3">
                    <div class="border3-t">
                        <div>订单编号：{{infoDetail.uni}}</div>
                        <div>{{infoDetail.time}} </div>
                    </div>
                    <div class="border3-c">
                        <div>订单名称：{{infoDetail.name}}</div>
                    </div>
                    <div class="border3-b">
                        <div>商品件数：{{infoDetail.num}}</div>
                        <div>总价格：<span style="color:#DA213D">¥ {{infoDetail.price}}</span></div>
                    </div>
                </div>
                <div class="pay-choose" :class="payChoose == 0?'select':''" @click="payClick(0)">
                    <img class="icon" src="../../assets/pay/icon_pay_weixin.png" alt="">
                    <div class="pay-text">微信支付</div>
                    <div class="radio" :class="payChoose == 0?'select':''"></div>
                </div>
                <div class="pay-choose" :class="payChoose == 1?'select':''" @click="payClick(1)">
                    <img class="icon" src="../../assets/pay/yue.png" alt="">
                    <div class="pay-text">月结支付</div>
                    <div class="radio" :class="payChoose == 1?'select':''"></div>
                </div>
                <div class="pay-choose" :class="payChoose == 2?'select':''" @click="payClick(2)">
                    <img class="icon" src="../../assets/second_icon/toPublicMoney.png" alt="">
                    <div class="pay-text">对公转账</div>
                    <div class="radio" :class="payChoose == 2?'select':''"></div>
                </div>

                <div class="pay-qrcode" ref="payQrcode" style="margin-top:20px"></div>
                <div class="confirmPay" @click="pay" v-if="confirmBtn">确认支付</div>
            </div>
        </div>
        <div class="dialog-shade"></div>
        <v-topublic ref="topublic" :uni="infoDetail.uni"></v-topublic>
    </div>
</template>

<script>
import { getAddress, payOrder, postAddress, payMonth } from "@api/user";
import { getCity } from "@api/public";
import { orderPayState } from "@api/order";
import QRCode from "qrcodejs2";
import toPublic from '@/components/storeView/toPublic';

export default {
    name: "orderName",
    props: ["info"],
    components:{
        "v-topublic":toPublic
    },
    data() {
        return {
            showDialog: false,
            uni: "",
            confirmBtn:true,
            payChoose: 0,
            addressList: [
                {
                    checked: false,
                    city: "秦皇岛市",
                    detail: " 的feed从",
                    district: "山海关区",
                    id: 111,
                    is_default: 1,
                    phone: "13121321312",
                    province: "河北省",
                    real_name: "青蛙打网球的",
                },
                {
                    checked: false,
                    city: "秦皇岛市",
                    detail: " 的feed从",
                    district: "山海关区",
                    id: 111,
                    is_default: 1,
                    phone: "13121321312",
                    province: "河北省",
                    real_name: "青蛙打网球的",
                },
                {
                    checked: true,
                    city: "秦皇岛市",
                    detail: " 的feed从",
                    district: "山海关区",
                    id: 111,
                    is_default: 1,
                    phone: "13121321312",
                    province: "河北省",
                    real_name: "青蛙打网球的",
                },
            ],
            addressForm: {
                id: "",
                real_name: "",
                phone: "",
                area: "",
                detail: "",
                isDefault: false,
            },
            infoDetail: {},
            rules: {
                real_name: [
                    {
                        required: true,
                        message: "请输入原名称",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入现名称",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        max: 11,
                        message: "手机号格式不正确",
                        trigger: "blur",
                    },
                ],
                area: [
                    {
                        required: true,
                        message: "请选择收货地区",
                        trigger: "change",
                    },
                ],
                detail: [
                    {
                        required: true,
                        message: "请输入详细地址",
                        trigger: "blur",
                    },
                ],
            },
            // 地址-省市区
            propsCascader: {
                expandTrigger: "hover",
                label: "n",
                value: "v",
                children: "c",
            },
            timer: "",
            separator: "",
            district: [],
            time: "",
            price: "",
            name: "",
            addressVal: [],
            address: {
                province: "",
                city: "",
                city_id: "",
                district: "",
            },
            callback: null,
        };
    },
    watch: {
        info(e) {
            console.log(e);
            this.infoDetail = e;
        },
    },
    methods: {
        reload() {
            this.showDialog = false;
            this.$router.go(-1);
        },
        payClick(index) {
            if (this.infoDetail.invoice_status == 0 && index == 1) {
                return this.$dialog.toast({ mes: "您的月结支付正在审核中" });
            }
            if (this.infoDetail.invoice_status == -1 && index == 1) {
                this.$confirm("您未开通月结账户，是否开通?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$router.push({ path: "/openMonth" });
                    })
                    .catch(() => {
                       
                    });
                return;
            }
            if (this.infoDetail.invoice_status == 2 && index == 1) {
                return this.$dialog.toast({ mes: "您的月结支付未通过" });
            }
            if (this.infoDetail.invoice_status == 3 && index == 1) {
                return this.$dialog.toast({ mes: "您的月结支付已被冻结" });
            }
            this.confirmBtn = true;
            this.payChoose = index;

            this.$refs["payQrcode"].innerHTML = "";
        },
        // 生成二维码
        creatQrCode(text, dom, w = 100, h = 100) {
            this.qrcode = new QRCode(dom, {
                text: text, // 需要转换为二维码的内容
                width: w,
                height: h,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
            });
        },
        // 检测支付是否成功
        heartBeat() {
            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.time++;
                this.getOrderPayState();
            }, 3000);
        },
        getOrderPayState() {
            orderPayState(this.infoDetail.uni).then((res) => {
                if (res.data.paid == 1) {
                    this.timer && clearInterval(this.timer);
                    this.$dialog.toast({ mes: "支付成功" });
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                }
            });
        },
        pay() {
            let payChoose = this.payChoose;
            let data = {
                uni: this.infoDetail.uni,
                paytype: "weixin",
                from: "frompc",
            };
            if (payChoose == 0) {
                payOrder(data)
                    .then((res) => {
                        if (res.status == 200) {
                            console.log(res.data);

                            this.creatQrCode(
                                res.data.result.jsConfig,
                                this.$refs["payQrcode"],
                                100,
                                100
                            );

                            this.heartBeat();
                            this.confirmBtn = false;
                            return;
                        }
                        this.$dialog.error(res.msg || "订单支付错误");
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else if(payChoose == 1) {
                data.price = this.infoDetail.price;
                data.paytype = "offline";
                payOrder(data)
                    .then((res) => {
                        if (res.status == 200) {
                            this.$dialog.toast({ mes: "订单提交成功" });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);

                            return;
                        }
                        return this.$dialog.error(res.msg);
                    })
                    .then((err) => {
                        console.log(err);
                    });
            }else{
                this.$refs.topublic.open()
            }
        },
        // 初始化
    },
};
</script>
<style >
.el-input {
    width: 100%;
}
.add-address-show .rule-form {
    width: auto;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss">
$color: #da213d;
.for-itm {
    margin-left: -50px;
    margin-top: 50px;
    .el-form-item__content {
        margin-left: 0 !important;
        width: 540px;
        display: flex;
        justify-content: space-between;
        .btn-r {
            width: 240px;
            height: 44px;
            background: #da213d;
            font-size: 16px;
            border-radius: 5px;
        }
        .btn-b {
            width: 242px;
            height: 46px;
            border: 1px solid #da213d !important;
            border-radius: 5px;
            font-size: 16px;
            color: #da213d !important;
            background: #fff !important;
        }
    }
}
.add-address-show1 {
    position: fixed;
    left: 0;
    right: 0;
    top: 100px !important;
    width: 700px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
    margin: auto;
    z-index: 20;
    .title {
        display: flex;
        width: 100%;
        height: 67px;
        align-items: center;
        background: #fbf0f0;
        justify-content: center;
        > div:nth-of-type(1) {
            font-size: 21px;
            color: #da213d;
            font-weight: bold;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 30px;
            color: #999999;
            position: absolute;
            right: 32px;
            cursor: pointer;
        }
    }
    .add-input {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 60px 30px !important;
    }
    .rule-form {
        width: 460px;
        button {
            width: 140px;
        }
    }
}

.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    background-color: rgba($color: #000000, $alpha: 0.4);
}

.el-cascader {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
}
ul {
    width: 100%;
    // border: 1px solid #dbdbdb;
    min-height: 240px;
    margin-bottom: 20px;
    .addAddr {
        width: 346px;
        height: 44px;
        background: #da213d;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        margin-top: 37px;
        margin-right: auto;
        margin-left: auto;
        cursor: pointer;
    }
    .li {
        background: #ffffff;
        border: 1px solid #eaa090;
        border-radius: 5px;
        height: 60px;
        margin: 0 40px 20px;
        font-size: 16px;
        padding: 0 20px;
        box-sizing: border-box;
        color: #333;
        .li-info-name {
            margin: 0 55px 0 30px;
            font-size: 18px;
            width: 90px;
            font-weight: bold;
            color: #da213d;
            line-height: 46px;
        }
        .name {
            text-align: right;
            flex: 1;
        }
        div {
            margin-left: 20px;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
        }
        .edit-box {
            // display: none;
            justify-content: flex-end;
            flex: 1;
            margin-right: 8px;
            img {
                width: 16px;
                height: 16px;
                margin-right: 5px;
            }
            .span1 {
                font-size: 18px;
                font-weight: bold;
                color: #fa321b;
                margin-right: 30px;
            }
            .span2 {
                font-size: 18px;
                font-weight: bold;
                color: #3ca9d7;
                margin-right: 30px;
            }
            .span3 {
                font-size: 14px;
                color: #014a97;
                margin-right: 30px;
            }
        }
    }
    li:hover .edit-box {
        display: flex;
    }
    li.select {
        color: #333333;
        font-weight: bold;
        background: #fbf7f7;
        border: 1px solid #eaa090;
    }
}
.border3 {
    width: 100%;
    height: 143px;
    background: #fcf8f8;
    padding: 20px;
    box-sizing: border-box;
    .border3-t {
        display: flex;
        justify-content: space-between;
        align-items: center;
        div {
            &:nth-child(1) {
                font-size: 16px;
                color: #da213d;
            }
            &:nth-child(2) {
                font-size: 16px;
                color: #666666;
            }
        }
    }
    .border3-c {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
        div {
            &:nth-child(1) {
                font-size: 15px;
                color: #333333;
                font-weight: bold;
            }
            &:nth-child(2) {
            }
        }
    }
    .border3-b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        div {
            &:nth-child(1) {
                font-size: 16px;
                color: #333333;
            }
            &:nth-child(2) {
                font-size: 16px;
                color: #333333;
            }
        }
    }
}
.confirmPay {
    width: 346px;
    height: 44px;
    background: #da213d;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    line-height: 44px;
    margin: 30px auto 0;
}
.pay-choose {
    width: 640px;
    height: 50px;
    border: 1px solid #eaa090;
    border-radius: 5px;
    display: flex;
    margin-top: 15px;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .icon {
        width: 28px;
        height: 28px;
    }
    .pay-text {
        font-size: 16px;
        color: #333333;
        margin-left: 10px;
        flex: 1;
    }
    .radio {
        width: 16px;
        height: 16px;
        border: 1px solid #da213d;
        border-radius: 100%;
    }
    .radio.select {
        position: relative;
        &::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;

            border-radius: 100%;
            left: 0;
            right: 0;
            margin: auto;
            width: 8px;
            height: 8px;
            background: #da213d;
        }
    }
}
.pay-choose.select {
    background: #fbf7f7;
}
</style>